<!--电费缴费-->
<template>
  <div>
    <div style="margin:10px 0;display: flex;flex-direction: row;justify-content: space-between;align-items: center;">
    </div >
    <!--表格主体 start-->
    <el-table :data="tableData"
              style="width: 100%"
              :default-sort = "{prop: 'date', order: 'descending'}"
              @selection-change="handleSelectionChange"
              :header-cell-style="tableHeaderColor">

      <el-table-column prop="campus" label="校区" sortable width="130"></el-table-column>
      <el-table-column prop="area" label="区域" sortable width="130"></el-table-column>
      <el-table-column prop="building" label="楼栋号" sortable width="130"></el-table-column>
      <el-table-column prop="roomId" label="宿舍号"sortable width="130"></el-table-column>
      <el-table-column prop="money" label="应缴费金额"sortable width="130"></el-table-column>

      <el-table-column label="操作" sortable>
        <template v-slot="scope" >
          <el-button :disabled="scope.row.status === 1" type="success" @click.native.prevent="modifyEpayment(scope.$index)">缴费 <i class="el-icon-edit"></i></el-button>

        </template>
      </el-table-column>
    </el-table>
    <!--表格主体 end-->

    <!--分页 start-->
    <div class="pagination">
      <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page.sync="pageNum"
          :page-sizes="[5,8, 10, 30, 50]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="count">
      </el-pagination>
    </div>
    <!--分页 end-->

    <!--嵌套表单 start-->
    <el-dialog :title="title" :visible.sync="dialogFormVisible" width="600px">
      <el-form label-width="100px">
        <el-form-item label="缴费人员学号">
          <el-input v-model="form.username" :readonly="true" :placeholder="form.username"></el-input>

        </el-form-item>

        <el-form-item label="校区">
          <el-input v-model="form.campus" :readonly="true" :placeholder="form.campus"></el-input>

        </el-form-item>

        <el-form-item label="区域">
          <el-input v-model="form.area" :readonly="true" :placeholder="form.area"></el-input>

        </el-form-item>

        <el-form-item label="楼栋号">
          <el-input v-model="form.building" :readonly="true" :placeholder="form.building"></el-input>

        </el-form-item>
        <el-form-item label="宿舍号">
          <el-input v-model="form.roomId" :readonly="true" :placeholder="form.roomId"></el-input>

        </el-form-item>

        <el-form-item label="缴费金额">
          <el-input v-model="form.money" :readonly="true" :placeholder="form.money"></el-input>
        </el-form-item>

      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancel">取 消</el-button>
        <el-button type="primary" @click="payWay">缴 费</el-button>
      </div>
    </el-dialog>
    <!--嵌套表单 end-->

    <!--支付弹窗 start-->
    <el-dialog
        :visible.sync="qrCodeVisible"
        width="100%"
        title="扫码支付"
        @close="cancelQRCode"
    >
      <div style="height:500px;text-align:center">
        <img
            width="70%"
            height="100%"
            :src="'https://userblink.csdnimg.cn/98e399ad4a5c434892753cd8aa1e2016.png?x-oss-process=image/interlace,1/format,jpg/resize,w_375'"
            controls="controls"
            ref="img"
        ></img>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancelQRCode">取 消</el-button>
        <el-button type="primary" @click="payFare">确 认</el-button>
      </div>
    </el-dialog>
    <!--支付弹窗 end-->
  </div>
</template>

<script>
export default {
  name: "ElectricPay",
  data(){
    return{
      //页签
      plate:"电费",
      func:"缴费",
      tableData: [],
      count:0,
      pageNum:1,
      pageSize:5,
      state:"全部", // 全部, 已缴费, 未缴费
      multipleSelection:[],
      dialogFormVisible:false,
      form:{},
      title:"",
      qrCodeVisible:false,
    }
  },
  created() {
    this.form.username=JSON.parse(localStorage.getItem("user")).username;
    this.pageNum = 1;
    this.pageSize = 5;
    this.init()
    this.$emit("generateTab",this.plate,this.func)
    //this.clearForm();
  },
  methods:{
    checkEmpty(x){
      if(x == "" || x == null || x == undefined)
      {
        return true;
      }
      else return false;
    },
    // 修改table header的背景色
    clearForm(){
      this.form = {
        building:"",
        campus:"",
        area:"",
        uid:"",
        status:"",
        money:"",
      }
    },
    tableHeaderColor({ row, column, rowIndex, columnIndex }) {
      if (rowIndex === 0) {
        return 'background-color: #e0f6fe;color: #303133;font-weight: 600;font-size:12px;'
      }
    },
    init(){
      let r=[];
      this.request({
        url:"/user/page",
        params: {
          pageNum:this.pageNum,
          pageSize:this.pageSize,
          search:this.form.username
        },
      }).then(
          res => {
            console.log(res)
            r=res.records[0];
            this.$set(this.form,"campus",r.campus);
            this.$set(this.form,"area",r.area);
            this.$set(this.form,"building",r.building);
            this.$set(this.form,"roomId",r.dormitory);
            this.$set(this.form,"uid",r.id);
            this.load()
          }
      )

    },
    load() {
      //axios方式http://localhost:9090前缀写在了request.js文件中，可省略
      this.request({
        url:"/epayment/pay",
        method:"GET",
        params: {
          pageNum:this.pageNum,
          pageSize:this.pageSize,
          campus:this.form.campus,
          area:this.form.area,
          building:this.form.building,
          roomId:this.form.roomId,
          state:"未缴费"
        },
      }).then(
          res => {
            console.log(res.data.records);
            this.tableData = res.data.records.map(a=>{
              a.showTime = a.createTime.slice(0, 10);
              if(a.user) a.user.status = (a.status === 1 ? '已缴费' : '未缴费')
              else a.user = {status:'未缴费'}
              return a
            })
            this.count = res.data.total;
          }
      )

    },
    //分页
    handleSizeChange(pageSize){
      console.log("pageSize:"+pageSize);
      this.pageSize=pageSize;
      this.load();
    },
    handleCurrentChange(pageNum){
      console.log("pageNum:"+pageNum);
      this.pageNum=pageNum;
      this.load();
    },
    clearAndLoad(){
      this.pageNum=1;
      this.pageSize=5;
      this.load();
    },
    //点击确认保存或更新用户信息
    checkForm(){
      if(this.form.building != null && this.form.building != "" && this.form.building != undefined
          || this.form.campus != null && this.form.campus != "" && this.form.building != undefined
          || this.form.area != null && this.form.area != "" && this.form.building != undefined
          || this.form.roomId != null && this.form.roomId != "" && this.form.roomId != undefined){
        return {code:true};
      }
      else return {code:false, msg:"有必填的信息"}
    },
    payWay(){
      this.qrCodeVisible = true
    },
    payFare(){
      let r = this.checkForm();
      console.log(r);
      if(!r.code)
      {
        this.$message.error(r.msg);
        return;
      }
      this.form.status = 1;
      this.dialogFormVisible=false;
      this.request.post("/epayment",this.form).then(res=>{
        console.log(res)
        if(res.code == "200"){
          this.$message.success("缴费成功！");
          this.load();
        }else{
          this.$message.error(res.msg);
          this.load();
        }
      })
      this.cancelQRCode()
    },
    //用户点击取消
    cancel(){
      this.dialogFormVisible=false;
      this.load();
    },
    cancelQRCode() {
      this.qrCodeVisible = false;
    },
    //点击进行缴费
    modifyEpayment(idx){
      let res=this.tableData[idx];
      this.title = "缴费信息确认";
      this.dialogFormVisible=true;
      let un=this.form.username;
      let id=this.form.uid;
      this.form={...res};
      this.form.username=un;
      if(this.form.uid==null) this.form.uid = id;
      else if(this.form.uid != id)
      {
        this.form.uid = id;
        this.dialogFormVisible=false;
        this.$message.error("与指定缴费人员矛盾！");
      }
    },
    handleSelectionChange(val){
      console.log(val)
      this.multipleSelection = val;
    }
  }
}
</script>

<style scoped>
.el-menu {
  height: 100%;
  border-right-width: 0;
}
.pagination,.search_box{
  padding: 10px 0px;
}

.el-dropdown-link {
  cursor: pointer;
}
.el-icon-arrow-down {
  font-size: 12px;
}
</style>